/**
 * 表单控件的控制类
 */
import { reactive, ref, watch, onMounted } from 'vue'
import { createModel } from './controllar/createModel'

import type {
  IFromProps, // 表单组件的属性
  IRuleMeta, // 验证
  IFormColShow, // 子组件的联动
  ISubs, // 分栏
  IFromMeta // 表单控件需要的 meta
} from '../types/30-form'

import type { IFormItem, IFormItemList } from '../types/20-form-item'

import { getColSpan } from './controllar/getColSpan'

// import { createPartModel } from './controllar/createPartModel'

import { getRules } from './controllar/getRules'

import { setControlShow } from './controllar/setControlShow'

/**
 * 表单控件的管理类
 * * 创建 v-model，创建局部 model，设置行列、排序相关的处理
 * @param formMeta 表单控件的 meta
 * @param model 表单的 model
 * @param partModel 表单的部分 model
 * @returns 
 */
 export default function formController (
  formMeta: IFromMeta,
  itemMeta: IFormItemList,
  model: any,
  partModel?: any
) {
  const { ruleMeta, colOrder } = formMeta
  // 设置 model 的 属性
  const defauleModel = createModel(itemMeta, colOrder)
  if (Object.keys(model).length < Object.keys(defauleModel).length) {
    // 没有属性或者属性不全，补全属性
    // const tmp = {}
    // Object.assign(tmp, defauleModel, model)
    // Object.assign(model, tmp)
    for (const key in defauleModel) {
      if (typeof model[key] === 'undefined') {
        model[key] = defauleModel[key]
      }
    }
  }

  // 关于一个字段占用几个td的问题
  const {
    formColSpan, // 一个字段占几个td的对象 
    setFormColSpan // 设置的函数
  } = getColSpan(formMeta.formColCount, itemMeta)

  // 监听列数，变化后重新设置
  watch(() => formMeta.formColCount, (v1) => {
    setFormColSpan()
  }, { immediate:true })

  // 监听控件的格子数，变化后重置
  watch(itemMeta, (v1) => {
    setFormColSpan()
  })

  // 设置备选项和子控件的联动
  const {
    showCol,
    setFormColShow
  } = setControlShow(formMeta, itemMeta, model, partModel)

  // 监听联动的变化，更新
  watch(formMeta.formColShow, () => {
    setFormColShow()
  })

  // 设置验证规则，把字段ID转换为字段名称
  // const rules = getRules(props)

  // 设置空规则
  for (const key in itemMeta) {
    if (typeof ruleMeta[key] === 'undefined') {
      // ruleMeta[key] = [{}]
    }
  }

  watch(formMeta.colOrder, () => {
    setFormColShow()
    setFormColSpan()
  })

  // 返回重置函数 
  formMeta.reset = () => {
    // alert('表单内部修改外部函数')
    setFormColShow()
  }


  return {
    formColSpan, // 确定组件占位
    // formRules: rules, // 表单的验证规则
    showCol, // 是否显示字段的对象
    setFormColShow // 设置组件联动
  }
}
